<style >
.layout-hide-text .layout-text {
    display: none;
}
</style>
<template>
    <Menu theme="dark" width="auto" :open-names="['1']" accordion :class="{'layout-hide-text': leftsize < 4}">
        <Submenu v-for="item in datalist" :name="item.Id" :key="item.Id">
            <template slot="title">
                <Icon :type="item.icon" :size="iconSize"></Icon>
                <span class="layout-text">{{item.title}}</span>
            </template>
            <router-link v-if="sitem.children.length==0" v-for="sitem in item.children" :to="sitem.url" :key="sitem.Id">
                <Menu-item :name="sitem.Id">
                    <Icon :type="sitem.icon" :size="siconSize"></Icon>
                    <span class="layout-text">{{sitem.title}}</span>
                </Menu-item>
            </router-link>
            <Menu-group v-if="sitem.children.length!=0" v-for="sitem in item.children" :title="sitem.title" :key="sitem.Id">
                <router-link v-for="ssitem in sitem.children" :to="ssitem.url" :key="ssitem.Id">
                    <Menu-item :name="ssitem.Id">
                        <Icon :type="ssitem.icon"></Icon>{{ssitem.title}}
                    </Menu-item>
                </router-link>
            </Menu-group>
        </Submenu>
    </Menu>
</template>
<script>
export default {
    props: ['datalist', 'leftsize'],
    computed: {
        iconSize() {
            return this.leftsize === 4 ? 18 : 24;
        },
        siconSize() {
            return this.leftsize === 4 ? 14 : 24;
        }
    },
}
</script>